<template>
    <div class="echart-chart">
        <div class="inside">
            <header>失业率</header>
            <div class="chartBox clearfix">
                <div class="chart-div" id="unemployment-chart" v-show="!chartNoDataShow"></div>
                <h4 v-show="chartNoDataShow">暂未查询到数据！</h4>
            </div>
            <p v-show="false">{{getCityIndexData}}</p>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                myEcharts: '',
                chartNoDataShow: false, //判断是否有无数据
            }
        },
        computed: {
            //从state获取城市指数数据
            getCityIndexData() {
                if(this.$store.getters.get_cityIndexData){
                    //获取失业率数据
                    if(Object.keys(this.$store.getters.get_cityIndexData).length != 0){
                        this.chartNoDataShow = false;
                        let data = this.$store.getters.get_cityIndexData;
                        //延时1s，否则会造成死循环，或者其他报错
                        this.$nextTick(() => {
                            this.unemployment_charts(data.unemployedRateLocal, data.unemployedRateState, data.unemployedRateUs);
                        });
                    }else{
                        this.chartNoDataShow = true;
                    }
                }
                return this.$store.getters.get_cityIndexData
            },
        },
        created() {
        },
        mounted() {
            this.myEcharts = echarts.init(document.getElementById('unemployment-chart'));
            this.myEcharts.showLoading();
            window.addEventListener('resize', () => {
                this.myEcharts.resize();
            });
        },
        methods: {
            //失业率——柱状图
            unemployment_charts(local, state, US){
                this.myEcharts.hideLoading();
                this.myEcharts.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        data: ["本地","本州","全美"],
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696'
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            show: false,
                        },
                        //分隔线的相关设置
                        splitLine: {
                            lineStyle:{
                                color: '#f1f1f1'
                            }
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    series: [{
                        name: '失业率',
                        type: 'bar',
                        barWidth: '40',
                        label: {
                            normal: {
                                show: true,//柱子上边显示文字标签
                                position: 'top',
                                formatter: '{c}%',
                                offset: [0, -5],
                                textStyle:{
                                    fontSize: 16,
                                    color: '#000',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        data: [
                            {
                                value: local,
                                itemStyle:{
                                    normal:{color:'#40c3f9'}
                                }
                            },
                            {
                                value: state,
                                itemStyle:{
                                    normal:{color:'#ffbf53'}
                                }
                            },
                            {
                                value: US,
                                itemStyle:{
                                    normal:{color:'#fe5960'}
                                }
                            }
                        ],
                    }],
                    animationEasing: 'elasticOut',
                    color: ['#40c3f9', '#ffbf53', '#fe5960'],
                });
            },
        },
        components: {
        }
    }
</script>

<style scoped lang="less" type="text/less">
</style>
